<template>
  <div>
    <h2>app:{{ name }} - {{ age }}</h2>
    <button @click="age++">修改age</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  setup() {
    const info = reactive({
        name:'inzv',
        age:18,
        height:188
    })
    // reactive被解构后会变成普通的值,失去响应式
    const { name , age} = toRefs(info)
    // 解构一个属性
    const height = toRef(info,"height")
    return {
        name,
        age,
        height
    };
  },
};
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
</style>
